<template>
    <div>
        <ExtForm ref="ExtForm" :formfields="formfields" @changeEventHandler="changeEventHandler"></ExtForm>
        <a-button v-if="showAddButtonMenu" shape="round" size="small" type="primary" icon="plus" @click="addButtonMenu" style="margin-left:10px;">添加按钮下拉菜单</a-button>
        <div v-if="showAddButtonMenu" class="ant-list ant-list-sm ant-list-split" style="max-height:60vh; overflow: auto;margin-left:10px;">
            <div class="ant-spin-nested-loading">
                <div class="ant-spin-container">
                    <ul class="ant-list-items">
                        <draggable :list="component.props.dropDownMenu" :sort="true" :animation="150" :group="{ name: 'field', pull: false, put: false }">
                            <li class="ant-list-item" v-for="(menu,idx) in component.props.dropDownMenu" :key="idx">
                                <div class="ant-list-item-meta">
                                    <div class="ant-list-item-meta-content">
                                        <h4 class="ant-list-item-meta-title">
                                            <a @click="menuEdit(menu)">{{menu.menuTitle}}</a>
                                            <a-divider type="vertical" />
                                            <a @click="menuDel(menu)">删除</a>
                                        </h4>
                                       
                                    </div>
                                </div>
                            </li>
                        </draggable>
                    </ul>
                </div>
            </div>
        </div>
        <DropDownButtonMenu :dropDownMenu="component.props.dropDownMenu" ref="DropDownButtonMenu"></DropDownButtonMenu>
    </div>
    

    
</template>
<script>

import pageSetting from '@/components/lt/codeGenerator/pageSetting'
import Vue from 'vue'
import ExtForm from '@/components/lt/codeGenerator/components/ExtForm'
import DropDownButtonMenu from './DropDownButtonMenu' 
import {SysMixin} from '@/mixins/SysMixin'
import draggable from 'vuedraggable'
import { Modal } from 'ant-design-vue'

export default {
    name:'ButtonAttribute',
    components:{ExtForm,DropDownButtonMenu,draggable},
    mixins:[SysMixin],
    props:{
        component:{
           type:Object,
           default:()=>{}
        },
    },
    watch:{
        
    },
    data(){
        return{
            pageSetting,
            formfields:[
                {field:'title',label:'标题',component:pageSetting.常量.表单组件类型.单行文本,initialValue:this.component.props["title"],rules: [{ required: true, message: '不能为空!' }]},
                {field:'ref',label:'ref',component:pageSetting.常量.表单组件类型.单行文本,initialValue:this.component.ref,disabled:true},
                {field:'type',label:'类型',component:pageSetting.常量.表单组件类型.下拉选择,initialValue:this.component.props["type"],options:pageSetting.数据字典.按钮类型,rules: [{ required: false, message: '不能为空!' }]},
                {field:'size',label:'大小',component:pageSetting.常量.表单组件类型.下拉选择,initialValue:this.component.props["size"],options:pageSetting.数据字典.组件大小类型,rules: [{ required: false, message: '不能为空!' }]},
                {field:'shape',label:'形状',component:pageSetting.常量.表单组件类型.下拉选择,initialValue:this.component.props["shape"],options:pageSetting.数据字典.按钮形状,rules: [{ required: false, message: '不能为空!' }]},
                {field:'icon',label:'按钮图标',component:pageSetting.常量.表单组件类型.单行文本,initialValue:this.component.props["icon"],},
                {field:'ghost',label:'按钮透明',component:pageSetting.常量.表单组件类型.开关,checkedChildren:true,unCheckedChildren:false,initialValue:this.component.props["ghost"]},
                {field:'disabled',label:'按钮失效',component:pageSetting.常量.表单组件类型.开关,checkedChildren:true,unCheckedChildren:false,initialValue:this.component.props["disabled"]},
                {field:'block',label:'宽度为父宽',component:pageSetting.常量.表单组件类型.开关,checkedChildren:true,unCheckedChildren:false,initialValue:this.component.props["block"]},
                {field:'click',label:'点击事件',component:pageSetting.常量.表单组件类型.单行文本,initialValue:this.component.props["click"],},
                {field:'dropDownButton',label:'是否下拉按钮',component:pageSetting.常量.表单组件类型.开关,checkedChildren:true,unCheckedChildren:false,initialValue:this.component.props["dropDownButton"]},
                
           ],
           showAddButtonMenu:false
        }
    },
   
    created(){
        this.showAddButtonMenu=this.component.props["dropDownButton"]
    },
    methods:{
        changeEventHandler(item){
            if(item["dropDownButton"]){
                //显示添加下拉菜单按钮
                this.showAddButtonMenu = true
            }else{
                this.showAddButtonMenu = false
            }
            for (const key in item) {
                Vue.set(this.component.props,key,item[key]);
                
            }
        },
        addButtonMenu(){
            this.handleEdit({},'DropDownButtonMenu','下拉菜单添加')
        },
        menuEdit(menu){
            this.handleEdit(menu,'DropDownButtonMenu','菜单详情')
        },
        menuDel(menu){
            Modal.confirm({
                title: "系统提醒",
                content: "确定删除？",
                onOk: () => {
                    this.component.props.dropDownMenu = this.component.props.dropDownMenu.filter(item=>{
                        return item.menuTitle!=menu.menuTitle
                    })
                },
                onCancel () {}
            })
        },
    }
}
</script>